<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-03-22 22:46:16
 * @LastEditors: yyh
 * @LastEditTime: 2022-05-16 11:17:24
-->
<!-- 资产分类管理页面 -->
<template>
  <div class="classification" align="center">
    <!-- 新增按钮、查询按钮 -->
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-button class="btn" size="small" type="primary" @click="toAdd"
            >创建</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.name"
            size="small"
            clearable
            placeholder="资产分类"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="toSearch"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格展示数据 -->
    <div>
      <el-table :data="tableData" border style="width: 50%">
        <el-table-column
          prop="id"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="资产分类"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" style="color: red" @click="toDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-width="formLabelWidth"
        >
          <el-form-item prop="name" label="资产分类">
            <el-input size="small" v-model="form.name"  clearable />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格展示数据
      tableData: [],
      // 模糊搜索表单的数据
      searchForm: {
        name: "",
      },
      //表单验证
      rules: {
        name: [{ required: true, message: "请输入资产分类", trigger: "blur" }],
      },
      // 表单数据
      form: {
        name: "",
      },
      // 模态框标题
      title: "",
      // 模态框的显示与隐藏
      visible: false, //隐藏
      formLabelWidth: "100px",
    };
  },
  created() {
    this.getClassification();
  },
  methods: {
    //获取资产分类数据
    async getClassification() {
      var temp = {
        ...this.searchForm,
      };
      // 删除属性
      // 遍历对象
      for (const key in temp) {
        // key是属性名  temp[key]属性值
        if (!temp[key]) {
          delete temp[key];
        }
      }
      var res = await this.$http.get("classification/getClassification", {
        params: temp,
      });
      this.tableData = res.data.data;
    },
    // 查询按钮点击事件处理程序
    toSearch() {
      this.getClassification();
    },
    //新增按钮事件处理程序
    toAdd() {
      // 清空表单数据
      this.form = {};
      this.title = "创建资产分类";
      this.visible = true;
    },
    //模态框确定按钮事件处理程序
    // 模态框确定按钮事件处理程序
    toSave() {
      // 获取dom的值，对值进行校验
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$http.post(
            "classification/addClassification",
            this.form
          );
          // 提示用户保存成功，刷新表格数据，关闭模态框
          this.$notify.success({
            title: "创建成功",
            message: res.message,
          });
          this.getClassification();
          this.visible = false;
        } else {
          // 校验不通过
          return false;
        }
      });
    },
    // 关闭模态框
    toClose() {
      // 重置表单验证
      this.$refs.ruleForm.resetFields();
    },
    // 删除按钮事件处理程序
    toDelete(id) {
      this.$confirm("确定删除此条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async (valid) => {
          var res = await this.$http.get("/classification/deleteClassification", {
            params: id,
          });
          if (valid) {
            //提示用户删除成功
            this.$notify({
              title: "删除成功",
              message: res.message,
              type: "success",
            });
            this.getClassification();
            this.visible = false;
          } else {
            //提示用户删除失败
            this.$notify({
              title: "删除失败",
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.btn {
  margin-right: 15px;
}
</style>
